<!-- 主页 -->
<template>
	<view>
		<!-- 头部背景 -->
		<view class="headCss">
			<view style="display: flex; align-items: center;">
				<!-- <view class="avatar">
					<image
						src="https://ts2.tc.mm.bing.net/th?id=ORMS.0005b9e6a5501bc8479862377af0978c&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.75&p=0"
						mode="aspectFill"></image>
				</view>
				<view class="name">
					大美汽修厂，欢迎您
				</view> -->
				<view class="addCoupon" @click="goAddCoupon">
					<image src="/static/coupon/加号@2x.png" mode=""></image>
					<text>新增优惠券</text>
				</view>
			</view>
		</view>

		<!-- 控制面板 -->
		<view class="headText">
			<view class="headDiv">
				<!-- 标签栏 -->
				<view class="tab-bar">
					<view class="tab-item" :class="{ active: currentTab === 'ongoing' }"
						@click="currentTab = 'ongoing'">
						进行中
					</view>
					<view class="tab-item1" :class="{ active: currentTab === 'ended' }" @click="currentTab = 'ended'">
						已结束
					</view>
				</view>

				<!-- 优惠券列表 -->
				<view class="coupon-list">
					<!-- 头部/标签栏/优惠券列表... -->
					<view v-for="(coupon, index) in currentCoupons" :key="index" class="coupon-item" :class="{ 
					        'coupon-ongoing': coupon.status === 'ongoing', 
					        'coupon-ended': coupon.status === 'ended' 
					      }">
						<view class="coupon-left">
							<view class="condition">满200元可用</view>

							<view class="amount">
								<text>￥</text>{{ coupon.amount }}
							</view>
						</view>
						<view class="coupon-right">
							<view class="name">{{ coupon.name }}</view>
							<view class="valid-time">有效期: {{ coupon.validTime }}</view>
							<view class="limit">每人限领一张</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: "ongoing", // 默认显示“进行中”
				coupons: {
					ongoing: [{
							amount: 20,
							name: "新用户专享体验券",
							validTime: "2020.3.18-2023.4.18",
							status:"ongoing"
						},
						{
							amount: 20,
							name: "新用户专享体验券",
							validTime: "2020.3.18-2023.4.18",
							status:"ongoing"
						},
						{
							amount: 20,
							name: "新用户专享体验券",
							status:"ongoing"
						},
					],
					ended: [{
							amount: 20,
							name: "新用户专享体验券",
							validTime: "2020.3.18-2020.4.18",
							status:"ended"
						},
						{
							amount: 20,
							name: "新用户专享体验券",
							validTime: "2020.3.18-2020.4.18",
							status:"ended"
						},
					],
				}
			}
		},
		computed: {
			currentCoupons() {
				return this.coupons[this.currentTab];
			},
		},
		onLoad() {
			this.fetchOngoingCoupons();
		},
		watch: {
			currentTab(newTab) {
				if (newTab === 'ongoing') {
					this.fetchOngoingCoupons();
				} else if (newTab === 'ended') {
					this.fetchEndedCoupons();
				}
			}
		},
		methods: {
			fetchOngoingCoupons() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					uni.hideLoading();
					/* this.coupons.ongoing = [{
						amount: 20,
						name: '进行中专属券',
						validTime: '2025.10.1-2025.11.1',
						status: 'ongoing'
					}, ]; */
				}, 1000);
			},
			fetchEndedCoupons() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					uni.hideLoading();
					/* this.coupons.ended = [{
						amount: 30,
						name: '已结束专属券',
						validTime: '2024.10.1-2024.11.1',
						status: 'ended'
					}, ]; */
				}, 1000);
			},
			goAddCoupon() {
				uni.navigateTo({
					url: '/pages/couponManage/addCoupon/addCoupon'
				});
			}

		}
	}
</script>

<style scoped>
	.headCss {
		background-color: #3385fd;
		width: 750rpx;
		height: 300rpx;
		position: fixed;

	}

	.headText {
		background-color: #fff;
		border-radius: 20rpx;
		width: 710rpx;
		margin-left: 20rpx;
		position: relative;
		top: 160rpx;
	}

	.addCoupon {
		width: 89vw;
		margin: 20rpx auto 0;
		border-radius: 50rpx;
		padding: 20rpx 0;
		text-align: center;
		background-color: #fff;
	}

	.addCoupon image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 26rpx;
		margin-bottom: -2rpx;
	}

	.addCoupon text {
		color: #3385fd;
		font-size: 36rpx;
	}


	.headDiv {
		display: block;
		justify-content: center;
		padding: 30rpx 20rpx;
	}

	/* 标签栏样式 */
	.tab-bar {
		display: flex;
		margin-bottom: 20rpx;
		margin: 0 100rpx 20rpx;
		font-size: 32rpx;
		color: #3385fd;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		background-color: #f3f3f3;
		padding: 15rpx 0;

		border-top-left-radius: 60rpx;
		border-end-start-radius: 60rpx;
	}

	.tab-item1 {
		flex: 1;
		text-align: center;
		background-color: #f3f3f3;
		padding: 15rpx 0;

		border-top-right-radius: 60rpx;
		border-end-end-radius: 60rpx;
	}


	.tab-item.active {
		background-color: #3385fd;
		color: #fff;
	}

	.tab-item1.active {
		background-color: #3385fd;
		color: #fff;
	}

	/* 优惠券列表样式 */
	.coupon-list {
		background-color: #fff;
	}

	.coupon-item {
		display: flex;
		margin-bottom: 20rpx;
		background-color: #fff3eb;
		border-radius: 10rpx;
		border-top-right-radius: 20rpx;
		border-end-end-radius: 20rpx;
	}

	.coupon-ended {
	  position: relative; /* 父元素相对定位，用于伪元素定位 */
	  background-color: #f0f0f0;
	  opacity: 0.7; /* 仅背景图透明，不影响文字 */
	}
	
	/* 伪元素承载背景图，并设置透明度 */
	.coupon-ended::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-size: 170rpx;
	  background-image: url('/static/coupon/1a7cdef7e44d372cd260a0483630ee26b37931b52ad2-qFaTDV@2x.png');
	  background-repeat: no-repeat;
	  background-position: bottom right;
	  opacity: 2; /* 仅背景图透明，不影响文字 */
	  z-index: 0;   /* 确保伪元素在文字下方 */
	}

	.coupon-left {
		background: linear-gradient(to bottom, #ff8a61, #ff6e1a);
		border-top-left-radius: 20rpx;
		border-end-start-radius: 20rpx;
		border-right: 4rpx solid #ffd1b2;
		color: #fff;
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 200rpx;
		margin-right: 20rpx;
	}

	.condition {
		font-size: 30rpx;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
		width: 240rpx;
		text-align: center;
	}

	.amount {
		font-size: 70rpx;
		font-weight: bold;
	}

	.amount text {
		font-size: 25rpx;
	}


	.coupon-right {
		align-items: center;
	}

	.name {
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.valid-time,
	.limit {
		font-size: 24rpx;
		color: #4e4d4b;
		margin-bottom: 5rpx;
	}

	.limit {
		margin-top: 50rpx;
	}

	.ended-stamp {
		width: 150rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		opacity: 0.6;
	}

	.empty-tip {
		text-align: center;
		padding: 30rpx;
		color: #6f6b69;
	}
</style>